<template>
	<view class="my-container">
		<view class="mask-container">
			<image class="head-img" :src="personalInfo.avatarUrl"
				mode=""></image>
			<view class="userinfo">
				<view class="kong">
				</view>
				<view class="username">
					<text>{{personalInfo.nickname}}</text>
				</view>
				<view class="Otherinfo">
					<text>{{personalInfo.follows}}关注</text>
					<text>{{personalInfo.followeds}}粉丝</text>
					<text>lv.{{personalInfo.level}}</text>
				</view>
			</view>
		</view>
		<view class="recommend-main">
			<div class="tabs flex">
				<view class="tab-item" :class="{ active: currentType == 'history' }" @click="changeType">最近</view>
				<view class="tab-item" :class="{ active: currentType == 'like' }" @click="changeType">喜欢</view>
			</div>
			<view class="music-title" @click="handlePlayAllMusic">
				<text class="iconfont icon-kaishi3 basic-icon-color playIcon"></text>
				全部播放
				<text class="light-text">(共{{ musicList.length }}首)</text>
			</view>
			<scroll-view scroll-y scroll-with-animation style="height: calc(100% - 100px)">
				<view class="music-item flex" :class="{ active: item.id == playInfo.id }"
					v-for="(item, index) in musicList" :key="item.id" @click="handlePlayMusic(item)">
					<image :src="item.al.picUrl + '?param=60y60'" class="music-img"></image>
					<view class="music-info">
						<view class="music-name text-overflow">{{ item.name }}</view>
						<view class="music-singer text-overflow flex">
							<span class="small-icon">{{ item.id % 2 == 0 ? 'SQ' : 'HD' }}</span>
							{{ item.ar ? item.ar.map(item => item.name).join('/') : '' }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tab-bar currentPage="my" />
	</view>
</template>

<script>
	import {
		getImage,
		getName
	} from '@/utils/index.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				currentType: 'history',
				musicList: [],
				personalInfo: {
					nickname: '',
					level: 0,
					followeds: 0, //粉丝
					follows: 4, //关注
					avatarUrl:'',
				}
			};
		},
		computed: mapState({
			playInfo: state => state.playInfo,
			paused: state => state.paused,
			userInfo: state => state.userInfo
		}),
		onReady() {
			this.getPersonalInfo()
			if (this.currentType == 'history') {
				this.getUserHistory();
			} else {
				this.getUserInfo();
			}
		},
		onShow() {

		},
		methods: {
			//获取用户身份信息
			async getPersonalInfo() {
				const res = await this.$api.getPersonalInfo({
					uid: this.userInfo.id
				})
				
				this.personalInfo.nickname = res.profile.nickname
				this.personalInfo.level = res.level
				this.personalInfo.follows = res.profile.follows
				this.personalInfo.followeds = res.profile.followeds
				this.personalInfo.avatarUrl = res.profile.avatarUrl
			},

			//获取用户喜欢的音乐
			//获取用户喜欢的音乐
			async getUserInfo() {
				// 	const uid = this.userInfo.id;
				// 	const timestamp = new Date().getTime();
				// 	const data = await this.$api.getUserInfo({ uid, timestamp });
				// 	console.log('data',data);
				// 	const id = data.playlist[0].id;
				// 	uni.showLoading({
				// 		title: '加载中...'
				// 	});
				// 	const list = await this.$api.getPlayListData({ id, timestamp });
				// 	const arr = list.playlist.trackIds.map(item => item.id).join(',');
				// 	this.musicList = [];
				// 	if (arr) {
				// 		const temp = await this.$api.getPlayDetail({ ids: arr, timestamp });
				// 		this.musicList = temp.songs || [];
				// 	}

				// 	uni.hideLoading();
				uni.showLoading({
					title: '加载中'
				})
				const list = await this.$api.likeData({
					uid: this.userInfo.id
				})
				const arr = list.ids.map(item => item).join(',');
				this.musicList = [];
				if (arr) {
					const temp = await this.$api.getPlayDetail({
						ids: arr
					});
					this.musicList = temp.songs || [];
				}
				uni.hideLoading();
			},

			//获取用户播放记录
			async getUserHistory() {
				uni.showLoading({
					title: '加载中'
				})
				const uid = this.userInfo.id;
				const timestamp = new Date().getTime();
				const data = await this.$api.getUserHistory({
					uid,
					timestamp,
					type: 0
				});
				this.musicList = data.allData.map(item => item.song);
				uni.hideLoading();
			},

			changeType() {
				this.currentType = this.currentType == 'history' ? 'like' : 'history';
				if (this.currentType == 'history') {
					this.getUserHistory();
				} else {
					this.getUserInfo();
				}
			},

			//播放全部
			handlePlayAllMusic() {
				if (this.musicList.length === 0) return;
				const list = this.musicList.map(item => {
					return {
						src: '',
						title: item.name,
						singer: getName(item),
						coverImgUrl: getImage(item),
						id: item.id
					};
				});

				this.$store.dispatch('playAllMUsic', list);
			},

			//点击播放
			handlePlayMusic(val) {
				if (this.playInfo.id == val.id) {
					uni.navigateTo({
						url: '../play/index'
					});
					return;
				}
				this.$store.dispatch('playMusic', {
					src: '',
					title: val.name,
					singer: getName(val),
					coverImgUrl: getImage(val),
					id: val.id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	.my-container {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #eee;

		.mask-container {
			padding-left: 5rpx;
			padding-right: 5rpx;
			overflow: hidden;
			position: absolute;
			height: 24%;
			width: 100%;

			background-size: cover;
			background-position: center;
			text-align: center;

			.head-img {
				width: 80px;
				height: 80px;
				margin: 4px auto;
				border-radius: 50%;
				overflow: hidden;
				z-index: 999;
			}

			.userinfo {
				width: 100%;
				height: 200rpx;
				position: absolute;
				bottom: 4rpx;
				background-color: white;

				.kong {
					width: 100%;
					height: 60rpx;
				}

				.username {
					font-size: 34rpx;
					font-weight: 700;
					font-style: normal;
				}

				.Otherinfo {
					margin-top: 10rpx;
					font-size: 14rpx;

					text {
						letter-spacing: 2rpx;
						margin: 0 10px;
					}
				}
			}


		}

		.recommend-main {
			background-color: white;
			width: 100%;
			border-radius: 5rpx;
			position: absolute;
			top: 27%;
			bottom: 50px;

			.tabs {
				border-radius: 10rpx;
				// box-shadow: 0 0 0.8px rgb(0, 0, 0 / 10%);
				border-top: 1rpx solid #eee;
				border-bottom: 1rpx solid #eee;
				width: 100%;
				height: 45px;
				align-items: center;

				.tab-item {
					flex: 1;
					font-size: 32rpx;
					text-align: center;
					color: rgba(0, 0, 0, 0.5);

					&.active {
						color: rgb(248, 78, 81);
					}
				}
			}

			.music-title {
				padding-left: 20px;
				margin: 15px 0;
				box-sizing: border-box;
				color: #000;
				font-size: 32rpx;
				font-weight: 600;

				.playIcon {
					margin-right: 8px;
					font-size: 40rpx;
				}

				.light-text {
					font-size: 24rpx;
					margin-left: 6px;
					color: rgba(0, 0, 0, 0.5);
				}
			}

			.music-item {
				height: 70px;
				box-sizing: border-box;
				padding: 0 20px;
				align-items: center;
				margin-bottom: 10px;
				position: relative;

				&:last-of-type {
					margin-bottom: 0;
				}

				&.active {
					background-image: linear-gradient(to right, rgba(247, 73, 79, 0.1), rgba(247, 73, 79, 0.05));

					.music-info {

						.music-name,
						.small-icon,
						.music-singer {
							color: #f84e51 !important;
						}

						&::before {
							content: '';
							width: 4px;
							height: 65px;
							background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
							position: absolute;
							left: 0px;
							top: 3px;
						}
					}
				}

				.music-img {
					width: 58px !important;
					height: 58px !important;
					border-radius: 6px;
				}

				.music-info {
					margin-right: 15px;
					margin-left: 15px;
					width: calc(100vw - 135px);
					text-align: left;

					.music-name {
						font-size: 30rpx;
						margin-bottom: 7px;
						color: #000;
					}

					.music-singer {
						color: rgba(0, 0, 0, 0.5);
						font-size: 24rpx;
						align-items: center;

						.small-icon {
							margin-right: 6px;
							transform: scale(0.9);
							color: rgba(0, 0, 0, 0.5);
							font-size: 12px;
							padding: 1px 3px;
							border: 1px solid rgba(0, 0, 0, 0.2);
							border-radius: 4px;
						}
					}
				}
			}
		}
	}
</style>
